import React from "react";
import {Row,Col,Menu, Icon ,Button,Modal,Tabs ,Form,Input ,message} from "antd";
import {post} from "../../utils/http.js";
import {Link} from "react-router";
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
import "../../static/css/pc/header.css";

class PCHeader extends React.Component{

	﻿
	constructor(){
		super();
		this.state = {
			current:"top",
			isLogin:false,
			modalShow:false,
			action:"login",
			nick:"未知",
			modalReset:false,
			id:null
		}
	}

	// Did的时候
	componentDidMount(){
		var username = localStorage.getItem("username");
		if(username){
			this.setState({
				nick:username,
				isLogin:true
			})
		}
	}

	changeMenuSelect(event){
		// 处理登录注册的独立事件
		if(event.key == "login"){
			this.showHideModal(true);
		}
		this.setState({
			current:event.key
		})
	}

	//唤醒修改面的模态框
	handlerReset(event){
		this.showHideReset(true);
	}

	// 登录注册框的现实与隐藏
	showHideModal(flag){
		this.setState({
			modalShow:flag
		})
	}

	//修改密码的显示与隐藏操作
	showHideReset(flag){
		this.setState({
			modalReset:flag
		})
	}

	// 修改密码的事件
	submitReset(event){
		event.preventDefault();
		var formData = this.props.form.getFieldsValue();
		var id = localStorage.getItem("id");
		let result = post("http://localhost:3000/resetpassword",{
				password:formData.resetpassword,
				id:id
			})
			.then(res => {
				return res.json()
			})
			.then(json => {
				this.showHideReset(false);
				message.info(json.msg);
			})
	}

	//判断用户登录还是注册
	getTabKey(key){
		if(key == "1"){
			// 登录
			this.setState({
				action:"login"
			})
		}else if(key == "2"){
			// 注册
			this.setState({
				action:"reg"
			})
		}
	}

	// 用户提交事件
	submitEvent(event){
		// 阻止form表单的默认跳转
		event.preventDefault();

		// 获取用户输入的值
		var formData = this.props.form.getFieldsValue();
		var action = this.state.action;
		if(action == "login"){
			//登录
			let result = post("http://localhost:3000/selectuser",{
				username:formData.username,
				password:formData.password
			})
			.then(res => {
				return res.json()
			})
			.then(json => {
				if(json.msg){
					// 未注册
					message.info(json.msg);
				}else{
					this.showHideModal(false);
					this.setState({
						isLogin:true,
						nick:json[0].username,
						id:json[0].id
					})
					// 本地存储
					localStorage.setItem("username",json[0].username);
					localStorage.setItem("id",json[0].id);
				}
				
			})

		}else if(action == "reg"){
			//注册
			let result = post("http://localhost:3000/adduser",{
				username:formData.r_username,
				password:formData.r_password
			})
			.then(res => {
				return res.json()
			})
			.then(json => {
				if(json.msg){
					// 成功
					message.info(json.msg);
					this.showHideModal(false);
				}				
			})
		}
	}

	// 登出
	logout(){
		this.setState({
			isLogin:false
		});
		// 清除本地缓存
		localStorage.removeItem("username");
		localStorage.removeItem("id");
	}

	render(){
		
		let { getFieldDecorator }  = this.props.form;

		var {current,isLogin,nick} = this.state;

		var showLogin = isLogin 
		? 
		<Menu.Item key="user" className="userInfo">
			<Button type="primary" onClick={this.handlerReset.bind(this)}>{nick}</Button>
			<Button type="dashed">
				<Link to={`/center`}>
					个人中心
				</Link>
			</Button>
			<Button type="primary" onClick={this.logout.bind(this)}>登出</Button>
		</Menu.Item>
		:
		<Menu.Item key="login" className="userInfo">
			登录丨注册
		</Menu.Item>
		return(

			<div>
				<Row>
					<Col span={2}></Col>
					<Col span={20}>
						<Menu onClick={this.changeMenuSelect.bind(this)} mode="horizontal" selectedKeys={[current]}>
							<Menu.Item key="top">
								<Link to={`/`}>
									<Icon type="to-top" />头条
								</Link>
							</Menu.Item>
							<Menu.Item key="yule">
								<Link to={`/yule`}>
									<Icon type="smile-o" />娱乐
								</Link>
							</Menu.Item>
							<Menu.Item key="junshi">
								<Link to={`/junshi`}>
									<Icon type="file" />军事
								</Link>
							</Menu.Item>
							<Menu.Item key="shehui">
								<Link to={`/shehui`}>
									<Icon type="appstore-o" />社会
								</Link>
							</Menu.Item>
							<Menu.Item key="guoji">
								<Link to={`/guoji`}>
									<Icon type="notification" />国际
								</Link>
							</Menu.Item>
							<Menu.Item key="guonei">
								<Link to={`/guonei`}>
									<Icon type="share-alt" />国内
								</Link>
							</Menu.Item>
							{showLogin}
						</Menu>

						{/* 登录注册对话框 */}

						<Modal visible={this.state.modalShow} onOk={() => this.showHideModal(false)}  onCancel={()=>this.showHideModal(false)}>
							<Tabs defaultActiveKey="1" onChange={this.getTabKey.bind(this)}>
								<TabPane tab="登录" key="1">
									<Form onSubmit={this.submitEvent.bind(this)}>
										<FormItem>
											{getFieldDecorator('username', {
								              	rules: [{ required: true, message: 'Please input your username!' }],
								            })(
								                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="text" placeholder="username" />
								            )}
										</FormItem>
										<FormItem>
											{getFieldDecorator('password', {
								            	rules: [{ required: true, message: 'Please input your Password!' }],
								          	})(
								            	<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
								          	)}
										</FormItem>
										<Button type="primary" htmlType="submit">登录</Button>
									</Form>
								</TabPane>
    							<TabPane tab="注册" key="2">
									<Form onSubmit={this.submitEvent.bind(this)}>
										<FormItem>
											{getFieldDecorator('r_username', {
								              	rules: [{ required: true, message: 'Please input your username!' }],
								            })(
								                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="text" placeholder="username" />
								            )}
										</FormItem>
										<FormItem>
											{getFieldDecorator('r_password', {
								            	rules: [{ required: true, message: 'Please input your Password!' }],
								          	})(
								            	<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
								          	)}
										</FormItem>
										<FormItem>
											{getFieldDecorator('pr_password', {
								            	rules: [{ required: true, message: 'Please input your Password!' }],
								          	})(
								            	<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
								          	)}
										</FormItem>
										<Button type="primary" htmlType="submit">注册</Button>
									</Form>
    							</TabPane>
							</Tabs> 
						</Modal>

						<Modal title={nick} visible={this.state.modalReset} onOk={() => this.showHideReset(false)}  onCancel={()=>this.showHideReset(false)}>
							<Form onSubmit={this.submitReset.bind(this)}>
								<FormItem>
									{getFieldDecorator('resetpassword', {
						              	rules: [{ required: true, message: 'Please input your resetpassword!' }],
						            })(
						                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="text" placeholder="new password" />
						            )}
								</FormItem>
								<Button type="primary" htmlType="submit">确定</Button>
							</Form>
						</Modal>

					</Col>
					<Col span={2}></Col>
				</Row>
			</div>
		)
	}
}

export default PCHeader = Form.create({})(PCHeader);